<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>咖啡音乐后台登录</title>
<link rel="icon" href="bitbug_favicon.ico" type="image/ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/lg-materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="layui/css/layui.css" media="all">

<style>
.msg {
	color: red;
	font-size: 5px;
	clear: both;
	font-weight: bold;
	height: 30px;
}

.lyear-wrapper {
	position: relative;
}

.lyear-login {
	display: flex !important;
	min-height: 100vh;
	align-items: center !important;
	justify-content: center !important;
}

.login-center {
	background: #fff;
	min-width: 38.25rem;
	padding: 2.14286em 3.57143em;
	border-radius: 5px;
	margin: 2.85714em 0;
}

.login-header {
	margin-bottom: 1.5rem !important;
}

.login-center .has-feedback.feedback-left .form-control {
	padding-left: 38px;
	padding-right: 12px;
}

.login-center .has-feedback.feedback-left .form-control-feedback {
	left: 0;
	right: auto;
	width: 38px;
	height: 38px;
	line-height: 38px;
	z-index: 4;
	color: #dcdcdc;
}

.login-center .has-feedback.feedback-left.row .form-control-feedback {
	left: 15px;
}
</style>
</head>
<body>
	<div class="row lyear-wrapper">
		<div class="lyear-login">
			<div class="login-center">
				<div class="login-header text-center">
					<a href="index.html"> <img alt="light year admin"
						src="images/logo-sidebar.png">
					</a>
				</div>
				<form action="#!" method="post">
					<div class="form-group has-feedback feedback-left">
						<div>
							<input type="text" placeholder="请输入您的用户名" class="form-control"
								name="username" id="uname" /> <span
								class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>

						</div>
						<input type="text"
							style="border: 0px; background: rgba(0, 0, 0, 0)" id="CheckMsg"
							disabled="disabled" class="msg" value="">
						<div class="form-group has-feedback feedback-left">
							<input type="password" placeholder="请输入密码" class="form-control"
								id="pwd" name="pwd" /> <input type="text"
								style="border: 0px; background: rgba(0, 0, 0, 0)"
								disabled="disabled" style="height: 1px"><span
								class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
						</div>

						<div class="form-group has-feedback feedback-left row">
							<div class="col-xs-7">
								<input type="text" name="captcha" class="form-control"
									placeholder="验证码"> <span
									class="mdi mdi-check-all form-control-feedback"
									aria-hidden="true"></span>
							</div>
							<div class="col-xs-5">
								<img src="images/captcha.png" class="pull-right" id="captcha"
									style="cursor: pointer;"
									onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新"
									alt="captcha">
							</div>
						</div>

						<div class="form-group">
							<button class="btn btn-block btn-primary" type="button" id="btn">立即登录</button>
						</div>
				</form>
				<hr>
				<footer class="col-sm-12 text-center"> </footer>
			</div>
		</div>
	</div>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript"></script>

	
	<script src="layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$("#uname").blur(function() {
				$.get("../login", "op=check&uname=" + $("#uname").val(), function(data, status, xhr) {
					if (data.msg == "该用户不存在") {
						$("#uname").css('border-color', 'red');
						$("#CheckMsg").val(data.msg);
					} else {
						$("#uname").css('border-color', '');
						$("#CheckMsg").val("");
					}
				})
			})
			$("#btn").click(function() {
				$.get("../login", "op=login&uname=" + $("#uname").val()
					+ "&pwd=" + $("#pwd").val(), function(data,status, xhr) {
					if (data.msg == "密码错误") {
						layui.use([ 'layer', 'form' ], function() {
							var layer = layui.layer
							layer.alert(data.msg, {
								icon : 2,
								skin : 'layer-ext-moon'
							})
						})

					} else if (data.msg == "请输入账号密码") {
						layui.use([ 'layer', 'form' ], function() {
							var layer = layui.layer
							layer.alert(data.msg, {
								icon : 5,
								skin : 'layer-ext-moon'
							})
						})
					}else if (data.msg == "未拥有管理员权限") {
						layui.use([ 'layer', 'form' ], function() {
							var layer = layui.layer
							layer.alert(data.msg, {
								icon : 5,
								skin : 'layer-ext-moon'
							})
						})
					}else {
						window.location.href = "index.jsp"
					}

				})
			})

		})
	</script>
</body>
</html>